<template>
	<div class="containers">
    <el-card>
		<div class="">
			<div class="handle-box">
				<el-button type="primary" icon="el-icon-plus" class="handle-add mr10"  size="mini" @click="addregion">添加</el-button>
			</div>
			<el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header" border size="mini" :height="$tableHight"
				@selection-change="handleSelectionChange" v-loading="loading">
        <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
				<el-table-column prop="title" label="公告抬头" width="200"></el-table-column>
				<el-table-column prop="publisher" label="发布人" width="150"></el-table-column>
				<el-table-column prop="sort" label="排序" width="100">
					<template slot-scope="scope">
						<el-input v-model="scope.row.sort" size="mini" @blur="operations(scope.row, 1)"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="content" label="内容" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" width="180" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)" size="mini">编辑</el-button>
						<el-button type="text" icon="el-icon-delete" class="red"
							@click="handleDelete(scope.$index, scope.row)" size="mini">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
					:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>

		<!-- 编辑/添加弹出框 -->
		<el-dialog :title="type?'编辑':'添加'" :visible.sync="editVisible" width="30%">
			<el-form ref="form" :model="form" label-width="70px">
				<el-form-item label="公告抬头"><el-input v-model="form.title" size="mini"></el-input></el-form-item>
				<el-form-item label="发布人"><el-input v-model="form.publisher" size="mini"></el-input></el-form-item>
				<el-form-item label="排序"><el-input v-model="form.sort" size="mini" type="Number"></el-input></el-form-item>
				<el-form-item label="内容"><el-input v-model="form.content" size="mini"></el-input></el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel" size="mini">取 消</el-button>
				<el-button type="primary" @click="saveEdit" size="mini">确 定</el-button>
			</span>
		</el-dialog>
  </el-card>
	</div>
</template>

<script>
export default {
	name: 'basetable',
	data() {
		return {
			form: {
				publisher: '',
				title: '',
				sort: 0,
				content:''
			},
			query: {
				pageIndex: 1,
				 pageSize: 20
			},
			code:0,
			tableData: [],
			multipleSelection: [],
			editVisible: false,
			pageTotal: 0,
			type:0,
			loading:false
		};
	},
	created() {
		this.getData()
	},
	methods: {

		//获取数据
		getData() {
      	this.loading=true
			this.request('admin/notice/', 'get', { page: this.query.pageIndex, size: this.query.pageSize,code:this.code }).then(res => {
				console.log(res)
				this.tableData=res.data.data
				this.pageTotal=res.data.total
			})
      	this.loading=false
		},
		// 编辑
		handleEdit(e) {
			this.editVisible = true;
			this.form = e;
			this.imageUrl = e.img;
			this.type=1
		},
		cancel() {
			this.editVisible = false;
			this.form = {
				publisher: '',
				title: '',
				sort: 0,
				content:''
			};
			this.getData();
		},
		// 修改排序
		operations(e, code) {
			console.log(e)
			e.sort=Number(e.sort)
			this.request('admin/notice/', 'put',e).then(res => {
				if (res.errno == 0) {
					this.$message.success(res.errmsg);
					this.getData()
				} else {
					this.$message.error(res.errmsg);
				}
			});
			this.editVisible = false;
		},
		// 删除操作
		handleDelete(index, row) {
			// 二次确认删除
			this.$confirm('确定要删除吗？', '提示', {
				type: 'warning'
			})
				.then(() => {
					this.request('admin/notice/', 'delete', { id: row.ID }).then(res => {
						if (res.errno == 0) {
							this.$message.success(res.errmsg);
							this.tableData.splice(index, 1)

						} else {
							this.$message.error(res.errmsg);
						}
					});
				})
		},
		// 多选操作
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		// 添加
		addregion() {
			this.form = {
				publisher: '',
				title: '',
				sort: 0,
				content:''
			};
			this.type=0
			this.imageUrl = '';
			this.editVisible = true;
		},

		// 添加/修改
		saveEdit() {
      if (!this.form.title) return this.$message.error('请输入公告抬头');
      if (!this.form.publisher) return this.$message.error('请输入发布人');
      if (!this.form.content) return this.$message.error('请输入内容');
			// this.form.sort=this.form.sort+''
			this.form.sort=Number(this.form.sort)
			this.request('admin/notice/', this.type?'put':'post', this.form).then(res => {
				if (res.errno == 0) {
					this.$message.success(res.errmsg);
					this.form = {
						publisher: '',
						title: '',
						sort: 0,
						content:''
					};
					this.getData()
				} else {
					this.$message.error(res.errmsg);
				}
			});
			this.editVisible = false;
		},
		// 分页导航
		handlePageChange(val) {
			this.$set(this.query, 'pageIndex', val);
			this.getData();
		}
	}
};
</script>

<style scoped>
.container {
	padding: 20px;
}
.el-upload--text {
	width: 200px !important;
}

.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;

	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	/* width: 100px; */
	height: 100px;
	line-height: 100px;
	text-align: center;
}

.avatar {
	width: 100%;
	height: 178px;
	display: block;
}

.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
	display: inline-block;
}

.table {
	width: 100%;
	font-size: 14px;
}

.red {
	color: #ff0000;
}

.mr10 {
	margin-right: 10px;
}

.table-td-thumb {
	display: block;
	margin: auto;
	width: 200px;
	height: 60px;
	.el-image img{
		object-fit: cover;
	}
}
/* 设置分页按钮样式 */
.pagination{
	margin-top: 20px;
	display: flex;
	justify-content: flex-end;
}
/* 使用 /deep/ 或 >>> 来穿透 scoped 样式 */
::v-deep .el-table th.el-table__cell {
  background-color: #f2f2f2;
  /* 设置表头颜色 */
  color: #333;
  /* 设置表头文字颜色 */
}
</style>
